<template>
  <view class="bg">
    <status-bar></status-bar>
    <slot name="aaa"></slot>
    <view class="user-info">
      <view class="avatar" @click="openLogin">
        <!-- <image :src="store.useLogin.userInfo.avatarUrl" mode="scaleToFill" /> -->
      </view>
      <view class="des">
        <view class="name">cv法师</view>
        <text class="phone">17772795647</text>
      </view>
    </view>

    <view class="money">
      <view class="money-box">
        <view class="left">
          <view class="balance">
            <text class="b">余额</text>
            <text class="m">0</text>
          </view>

          <view class="tip">分享给朋友购票可获得红包</view>
        </view>

        <view class="right">
          <view class="but">立即提现</view>
        </view>
      </view>
    </view>
  </view>

  <view class="card">
    <view class="card-box">
      <view class="li">
        <text>0</text>
        <text class="title">积分数</text>
      </view>
      <view class="xian"></view>
      <view class="li">
        <text>0</text>
        <text class="title">优惠劵</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

import statusBar from '@/components/navbar/src/statu-bar/statusBar.vue'

const emit = defineEmits(['loginHnadle'])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const openLogin = () => {
  emit('loginHnadle')
}

const selectHandle = (e: any) => {
  console.log(e, 333333333)
}

const login = reactive({
  list: [
    {
      id: 1,
      title: '使用微信头像',
    },
    {
      id: 2,
      title: '使用自定义头像',
    },
    {
      id: 3,
      title: '退出登入',
    },
  ],
})

const show = ref(false)

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.bg {
  width: 180%;
  height: auto;
  left: -40%;
  top: 0;
  z-index: 999;
  content: '';
  border-radius: 0 0 45% 45%;
  background: linear-gradient(to bottom, #4f62ff, #4fd0ff);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20rpx;

  position: relative;
  overflow: hidden;

  .user-info {
    width: 95vw;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 90rpx;
    margin-bottom: 20rpx;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      background-color: #fff;
      border-radius: 50%;
    }

    .des {
      margin-left: 20rpx;
      color: #fff;

      .name {
        color: #fff;
        margin-bottom: 10rpx;
      }

      .phone {
        font-size: 0.7rem;
      }
    }
  }

  .money {
    width: 95vw;
    height: 175rpx;
    position: relative;
    top: 10rpx;
    overflow: hidden;

    .money-box {
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: -10rpx;
      z-index: 1;
      background-color: #000000;
      color: #fff;
      border-radius: 15rpx;
      display: flex;
      box-sizing: border-box;
      padding: 0 20rpx;

      .left {
        width: 75%;

        .balance {
          margin: 20rpx 0;

          .m {
            color: #ff9c00;
            margin-left: 10rpx;
          }
        }

        .tip {
          font-size: 0.7rem;
        }
      }

      .right {
        width: 25%;
        display: flex;
        align-items: center;

        .but {
          width: 150rpx;
          height: 50rpx;
          background-color: #ffe4ba;
          color: #2f2f2f;
          border-radius: 30rpx;
          font-size: 0.7rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}

.card {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  .card-box {
    height: 200rpx;
    width: 95vw;
    border: 1px solid #eeeeee;
    border-radius: 20rpx;
    display: flex;
    box-sizing: border-box;
    padding: 50rpx;
    margin-top: 20rpx;

    .li {
      width: 50vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      font-size: 0.75rem;

      .title {
        color: #606266;
        margin-top: 20rpx;
      }
    }

    .xian {
      width: 1rpx;
      height: 100%;

      border-left: 1px dashed #eeeeee;
    }
  }

  .order-box {
    display: flex;
    flex-direction: column;
  }
}
</style>
